// 此处完成购物车逻辑代码
//1. 先把list里面的数据渲染出来
//2. 能够全选反选同时总价 总购买数量变化
//3. 单个商品数量能够加减 但是有限制 加减的时候小记价格，总价要变化，总购买数量也要变化
//4. 能够删除单个商品，删除的同时 总购买数量和总价要变化
//5. 能够删除选中商品，删除的同时 总购买数量和总价要变化
//6. 能够清空购物车，总数量和总价要对应变化
let ul = document.querySelector('ul');
function page() {
  let selectItem = 0;
  let selectTotalNum = 0;
  let totalPrice = 0;
  console.log(list);
  list.forEach((item) => {
    if (item.select == true) {
      selectItem++;
      selectTotalNum += item.buy_num;
      totalPrice += item.price * item.buy_num;
    }
  });
  for (let i = 0; i < list.length; i++) {
    let li = document.createElement('li');
    li.innerHTML = `
  <div class="select">
  <input type="checkbox" class="item-btns" />
</div>

<div class="pic"><img src=${list[i].pic} alt="" /></div>
<div class="name">${list[i].name}</div>
<div class="price">￥ <span class="col-price">${Number(list[i].price).toFixed( 2 )}</span></div>
<div class="number">
  <button class=reduce>-</button>
  <input type="text" value=${list[i].buy_num} />
  <button class="add">+</button>
</div>
    
<div class="subtotal">￥ ${Number(list[i].price * list[i].buy_num).toFixed( 2 )}</div>

<div class="del"><button class="del-btn">删除</button></div>
  `;
    ul.append(li);
  }
  window.localStorage.list = JSON.stringify(list);
}
page();

// 全选和反选
var allBtn = document.querySelector('.allBtn');
let li = document.querySelectorAll('li');
let delAll = document.querySelector('.clear_select');
var btns = [...document.querySelectorAll('.item-btns')];
allBtn.onclick = function () {
  btns.forEach((ele) => {
    ele.checked = allBtn.checked;
  });
  total();
};
btns.forEach((ele) => {
  ele.onclick = function () {
    allBtn.checked = btns.every((ele) => ele.checked);
    total();
  };
});
for (let i = 0; i < li.length; i++) {
  li[i].onclick = function (e) {
    let input = this.getElementsByTagName('input')[1];
    switch (e.target.className) {
      case 'add':
        input.value =
          parseInt(input.value) + 1 >= list[i].number
            ? list[i].number
            : parseInt(input.value) + 1;
        totalSum(this);
        break;
      case 'reduce':
        input.value =
          parseInt(input.value) - 1 <= 1 ? 1 : parseInt(input.value) - 1;
        totalSum(this);
        break;
      case 'del-btn':
        let con = confirm('删了？');
        if (con) {
          this.parentNode.removeChild(this);
        }
    }
    total();
  };
  li[i].onkeyup = function (e) {
    let input = this.getElementsByTagName('input')[1];
    input.value =
      parseInt(input.value) + 1 >= list[i].number
        ? list[i].number
        : parseInt(input.value) + 1;
    totalSum(this);
    total();
  };
}
function totalSum(that) {
  let num = that.getElementsByTagName('input')[1].value;
  let price = parseInt(that.querySelector('.col-price').innerHTML);
  that.querySelector('.subtotal').innerHTML =
    '￥' + Number(num * price).toFixed(2);
  return price;
}

function total() {
  let amount = document.getElementById('amount');
  var totalNum = document.getElementById('totalNum');
  let Num = 0;
  // 总价
  let amountNum = 0;
  let li = document.querySelectorAll('li');
  for (let i = 0; i < li.length; i++) {
    if (li[i].getElementsByTagName('input')[0].checked) {
      Num += parseInt(li[i].getElementsByTagName('input')[1].value);
      let ptices = li[i].querySelector('.subtotal').innerHTML;
      ptices = parseInt(ptices.substring(1, ptices.length));
      amountNum += ptices;
    }
  }
  console.log(amountNum);
  totalNum.innerHTML = Num;
  amount.innerHTML = amountNum;
}
delAll.addEventListener('click', function () {
  let cbx = document.querySelectorAll('input[type=checkbox]');
  cbx.forEach((ele, index) => {
    if (ele.checked) {
      ele.parentNode.parentNode.remove();
    }
  });
});
